<template>
  <div class="wrapper">
    <el-form :model="testFrom" class="login-warp">
      <h3 class="title">登录</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="testFrom.name" placeholder="请输入手机号">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" @keyup.enter.native="login"> 
        <el-row>
          <el-col :span="18">
            <el-input type="password" v-model="testFrom.password" placeholder="请输入验证码">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" style="margin-left:20px">获取验证码</el-button>
          </el-col>
        
        </el-row>
      </el-form-item>
      <!-- <el-checkbox v-model="checked">记住密码</el-checkbox> -->
      <el-button type="primary" class="login-btn" :loading="logining" @click="login" >登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      logining: false,
      checked: false,
      testFrom:{
        name: '',
        password: ''
      },
    }
  },
  mounted(){
   
  },
  methods:{
    async login(){
      let params = {
        username: this.testFrom.name,
        password: this.testFrom.password,
      }
      if(!this.testFrom.name || !this.testFrom.password){
        this.$message({
          message: '账号或者验证码不能为空',
          type: 'warning'
        });
        return;
      }
      const res = await this.$api.signInUser(params)
      if(res.data.level=='success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        });
        let user_token = res.data.data;
        window.localStorage.setItem('user_token', user_token);
        this.$router.push({ path: '/home' })
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
  }
}
</script>
<style lang='scss' scoped>
.wrapper{
    background:url('../../../static/images/loginbg.jpg');
    background-size:100%;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    position: absolute;
}
 .login-warp{
  width: 500px;
  height: 300px;
  padding: 20px 40px;
  margin: 180px auto;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  box-shadow: 0 0 25px #000;
    .title{
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      margin-bottom: 30px;
      color: #666666;
    }
    .login-btn{
      width: 100%;
      margin-top: 20px;
    }
  }
</style>

<style>
.el-form-item.is-success .el-input__inner{
  background-image: none;
  border-color: #e9e9e9;
  box-sizing: border-box;
  color: #1f2d3d;
  font-size: inherit;
  outline: 0;
  transition: border-color .2s 
}

.el-form-item.is-success .el-input__inner:hover {
  border: 1px solid #bfcbd9;
}
 
.el-form-item.is-success .el-input__inner:focus{
    border-color: #42a5f5;
}

</style>
